<template>
  <div id="revisePage">
      <div> 
          <span class="title">名称</span>
          <span style="color:#666666">{{phoneTypeStr}}</span>
      </div>
      <div>
          <span class="title">链接地址</span>
          <input type="text" v-model="params.url" class="inputBox">
      </div>
      <div class="imgsBox">
        <div class="title" style="float:left">图片</div>
        <div class="imgBox">
            <div>{{imageText1}}</div>
            <img :src="params.imageSize1" alt="1" class="imgSize">
             <el-upload
            :name='uploadConfig.name'             
            :action="uploadConfig.uploadeUrl"
            :multiple="false"
            :accept="uploadConfig.accept"
            :show-file-list='false'
            :http-request='submitUpload'
            :before-upload='handleBeforeUpload'
            :file-list="fileList" @click.native="setImgSize('imageSize1')">
            <div size="small" type="primary" class="imgBtn">修改</div>
             </el-upload>
        </div>
        <div class="imgBox">
            <div>{{imageText2}}</div>
            <img :src="params.imageSize2" alt="1" class="imgSize">
            <el-upload
            :name='uploadConfig.name'             
            :action="uploadConfig.uploadeUrl"
            :multiple="false"
            :accept="uploadConfig.accept"
            :show-file-list='false'
            :http-request='submitUpload'
            :before-upload='handleBeforeUpload'
            :file-list="fileList" @click.native="setImgSize('imageSize2')">
            <div size="small" type="primary" class="imgBtn">修改</div>
             </el-upload>
        </div> 
        <div class="imgBox">
            <div>{{imageText3}}</div>
            <img :src="params.imageSize3" alt="1" class="imgSize">
            <el-upload
            :name='uploadConfig.name'             
            :action="uploadConfig.uploadeUrl"
            :multiple="false"
            :accept="uploadConfig.accept"
            :show-file-list='false'
            :http-request='submitUpload'
            :before-upload='handleBeforeUpload'
            :file-list="fileList" @click.native="setImgSize('imageSize3')">
            <div size="small" type="primary" class="imgBtn">修改</div>
             </el-upload>
        </div> 
        <div class="imgBox" v-if="onePhoneType=='ANDROID'">
            <div>{{imageText4}}</div>  
            <img :src="params.imageSize4" alt="1" class="imgSize">
            <el-upload
            :name='uploadConfig.name'             
            :action="uploadConfig.uploadeUrl"
            :multiple="false"
            :accept="uploadConfig.accept"
            :show-file-list='false'
            :http-request='submitUpload'
            :before-upload='handleBeforeUpload'
            :file-list="fileList" @click.native="setImgSize('imageSize4')">
            <div size="small" type="primary" class="imgBtn">修改</div>
             </el-upload>
        </div> 
        <div class="imgBox" v-if="onePhoneType=='ANDROID'">
            <div>{{imageText5}}</div>  
            <img :src="params.imageSize5" alt="1" class="imgSize">
            <el-upload
            :name='uploadConfig.name'             
            :action="uploadConfig.uploadeUrl"
            :multiple="false"
            :accept="uploadConfig.accept"
            :show-file-list='false'
            :http-request='submitUpload'
            :before-upload='handleBeforeUpload'
            :file-list="fileList" @click.native="setImgSize('imageSize5')">
            <div size="small" type="primary" class="imgBtn">修改</div>
             </el-upload>
        </div>
      </div>
      <div class="tip">请上传以上分辨率(宽度*高度)jpg、png、gif图片,大小不超过300kb</div>
      <div style="overflow:hidden">
          <div class="cancelBtn" @click="back">取消</div>
          <div class="saveBtn" @click="submit">保存</div>
      </div>
      
  </div>
</template>
<script>
    import browserMD5File from 'browser-md5-file'
    import {ADdetail,ADstore} from 'api/advertisement/index.js';
    import { api, postUploadImg } from 'api/common'
    export default {
        data(){
            return{
                title:['广告管理','修改启动页'],
                phoneTypeStr:this.$route.query.phoneTypeStr,
                onePhoneType:this.$route.query.onePhoneType,
                imageText1:'',
                imageText2:'',
                imageText3:'',
                imageText4:'',
                imageText5:'',
                imgSize:'',
                uploadConfig:{//上传图片用的配置
                    name:'upload_file',
                    uploadeUrl:api.postUploadImg,//图片上传的链接
                    accept:"image/png,image/gif,image/jpeg,image/jpg",
                },
                fileList:[],//上传图片列表
                params:{
                    channel: this.$route.query.aChannel,
                    imageSize1: "",
                    imageSize2: "",
                    imageSize3: "",
                    imageSize4: "",
                    imageSize5: "",
                    phoneType: this.$route.query.onePhoneType,
                    url: "",
                    id:''
                }
            }
        },
        created(){
            this.$emit('setTitleMsg',this.title);
            // 获取该端已经上传的图片
            this.getImage();
            // 初始化图片格式
            this.setImageText();
        },
        methods:{
            setImgSize(size){
                this.imgSize=size;
            },
            getImage(){
                // console.log(JSON.parse(this.$route.query.item));
                let params={
                    aChannel:this.$route.query.aChannel,
                    onePhoneType:this.$route.query.onePhoneType
                }
                console.log(params);
                ADdetail(params)
                    .then((response)=>{
                        let data=response.data;
                        if(data.resultCode=='200'){
                            this.params.imageSize1=data.result.imageSize1;
                            this.params.imageSize2=data.result.imageSize2;
                            this.params.imageSize3=data.result.imageSize3;
                            this.params.imageSize4=data.result.imageSize4;
                            this.params.imageSize5=data.result.imageSize5;
                            this.params.id=data.result.id;
                            this.params.url=data.result.url;
                        }else{
                            this.$alert(data.msg);
                        }
                    })
            },
            setImageText(){
                console.log(this.$route.query.onePhoneType)
                if(this.$route.query.onePhoneType=='IOS'){
                    this.imageText1='640px*910px',
                    this.imageText2='750px*1068px',
                    this.imageText3='1242px*1766px'
                }else if(this.$route.query.onePhoneType=='ANDROID'){
                    this.imageText1='360px*512px',
                    this.imageText2='540px*768px',
                    this.imageText3='720px*1024px',
                    this.imageText4='1080px*1536px',
                    this.imageText5='1440px*2048px'
                }
            },
            handleBeforeUpload(file){//文件上传前
                console.log(arguments);
                console.log(file);
                // console.log('handleBeforeUpload', file)
                const isLt3M = file.size / 1024 / 1024 < 0.3;
                if (!isLt3M) {
                this.$message.error('上传图片大小不能超过 300kb!');
                }
                return isLt3M
            },
            submitUpload(obj){
                console.log(obj);
                let file = obj.file
                // console.warn('submitUpload', file)
                browserMD5File(file, (err, md5)=> {
                    let fd = new FormData()
                    fd.append('upload_file',file)
                    fd.append('file_md5',md5)
                    this.postUploadImg(fd)
                });
            },
            async postUploadImg(fd){
                try{
                    let back = await postUploadImg(fd)
                    back = back.data
                    console.log('postUploadImg', back)
                    console.log(back);
                    if(back.success){
                        console.log(back);
                        console.log(this.imgSize);
                        console.log(this.params);
                        this.params[this.imgSize] = back.file_path
                    }else{
                        this.$alert('图片上传失败')
                    }
                }catch(err){
                    this.$alert('图片上传失败！')
                    console.error(err)
                }
            },
            submit(){
                ADstore(this.params)
                    .then((response)=>{
                        let data=response.data;
                        console.log(data);
                        if(data.resultCode=='200'){
                            this.$alert('保存成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                   this.$router.push({name:'loadingScreen'})
                                }
                            });
                        }
                    })
            },
            back(){
                this.$router.push({name:'loadingScreen'})
            }
        }
    }
</script>
<style scoped lang="less">
    .title{
        display:inline-block;
        text-align: right;
        width:5rem;
        margin-bottom:1rem;
        margin-right:1rem;
    }
    .inputBox{
        width:13rem;
        height:1.5rem;
        font-size:1rem;
        border:1px solid #cccccc;
        border-radius: 4px;
        text-indent: 10px;
    }
    .imgsBox{
        overflow:hidden;
        margin-top:1rem;
    }
    .imgSize{
        width: 9.375rem;
        height:13.375rem;
        margin-top:0.9375rem;
    }
    .imgBox{
        float: left;
        width:11.25rem;
        height: 20.625rem;
        background: #f9f9f9;
        border-radius: 10px;
        border:1px solid #e0e0e0;
        text-align:center;
        margin-left:2.5rem;
        padding:0.95rem;
        font-size:0.875rem;
        color:#222222;
    }
    .imgBox:nth-child(2){
        margin-left:0;
    }
    .imgBtn{
        width:9.375rem;
        height: 1.875rem;
        line-height:1.875rem;
        background:#f7931e;
        color:white;
        border-radius:0.2rem;
        margin-top:1.25rem;
    }
    .imgBtn:active{
        background:#db7c1d;
    }
    .tip{
        font-size:0.875rem;
        color:#ed1c24;
        margin-left:6rem;
        margin-top:0.8rem;
    }
    .saveBtn{
        float:left;
        width:11.25rem;
        height:2rem;
        line-height:2rem;
        background:#63c5ce;
        color:white;
        text-align:center;
        border-radius:0.2rem;
        cursor: pointer;
        margin-left:3rem;
        margin-top:5rem;
    }
    .saveBtn:active{
        background:#4d9999;
    }
    .cancelBtn{
        float:left;
        width:11.25rem;
        height:2rem;
        line-height:2rem;
        text-align:center;
        border:1px solid #63c5ce;
        color:#63c5ce;
        background:#ffffff;
        border-radius:0.2rem;
        margin-left:6rem;
        margin-top:5rem;
        cursor: pointer;
    }
    .cancelBtn:active{
        height:2rem;
        background:#f6f6f6;
    }
</style>


